ESLint 一直是我們打程式的重要指標,它不但能夠替我們檢查語法風格中的問題,也避免某些問題可能會造成的程式錯誤,所以如果 ESLint 無法在 TypeScript 專案中替我們正確檢測語法問題,那是一件很可惜的事情,本篇會來解釋如何讓 ESLint 的配置適用於 TypeScript。
如前言所說,ESLint 還不認識 TypeScript,因此仍然是使用 JavaScript 與 JSX 的模式在做檢測,例如在昨天編譯 SCSS 產生的 src/index.scss.d.ts 裡面就會出現以下語法問題:
因為 ESLint 就搞不懂冒號是在幹嘛,會認為它是多餘的語法。
首先替 ESLint 下載適用於 TypeScript 的檢查規則:
npm install eslint-plugin-typescript --save-dev
npm install @typescript-eslint/parser --save-dev
eslint-plugin-typescript 是依賴套件,@typescript-eslint/parser 是主要的 Parser。
下載完後到 ESLint 的設定檔 .eslintrc.js ,加上以下的設定:
module.exports = {
parser: '@typescript-eslint/parser',
plugins: [
'react',
'typescript',
],
/* 其餘省略 */
};
接下來重新打開編輯器,就會看見 src/index.scss.d.ts 中關於語法 :
的錯誤消失了,剩下就是平常我們在 JavaScript 中會出現的問題:
不過在我們打開 src/index.tsx 的時候,仍然會看到一片紅:
這裡有兩個原因,一個是因為在 import
的時候我們都習慣在目錄中加上 index.js 來預設 export,但是我們現在換成 .ts,就得另外設定預設匯出的副檔名,開啟 .eslintrc.js,加入以下設定:
module.exports = {
/* 其餘省略 */
settings: {
"import/resolver": {
node: {
extensions: [".js", ".jsx", ".ts", ".tsx"]
}
}
},
};
接下來是下方的 JSX 語法問題,ESLint 認為 JSX 只能在 .jsx
檔案內撰寫而已,這裡一樣是修改 .eslintrc.js,只需要在 rule
中將語法規則關掉:
module.exports = {
/* 其餘省略 */
rules: {
'react/jsx-filename-extension': 'off',
},
}
原本紅通通的畫面就正常啦:
然後這時候專案中應該會籠罩在轉換成 TypeScript 的語法問題氣氛中,像是有些變數我們都沒有指定型別,TypeScript 就會提醒我們:
但是不曉得大家有沒有發現,雖然 TypeScript 替程式檢查出了問題,但仍然可以在前兩章時通過編譯,原因是這個語法檢測很貼心,在專案裡有時候我們會想先簡單寫段程式來做測試,確認某些功能有沒有辦法實現,但這時候如果因為一些語法問題而無法編譯,就得再花時間解決那些語法問題,而現在只會在你想檢查的時候檢查,平常就是貼心提醒,但還是可以編譯就是了。
在 TypeScript 中,如果要常駐使用語法檢測可以輸入以下指令:
npm run tsc --watch
也可以將它加到 package.json 中:
{
/* 其餘省略 */
"scripts": {
/* 其餘省略 */
"tsc-w": "tsc --watch"
},
/* 其餘省略 */
}
不過開啟 --watch
前可要注意!要先在 tsconfig.json 中將 noEmit
的選項打開:
否則每次檢查都會產生一堆編譯過後的 JavaScript 檔案,檢查後就會將有問題的地方通通列出:
本文的範例程式碼會提供在 GitHub 上,歡迎各位參考:)
經過本章的處理後,專案頓時少了很多紅線錯誤,看起來就挺舒服的,如果文章中有任何問題,或是不理解的地方,麻煩再留言告訴我!謝謝大家!